<!DOCTYPE html>
<html>


<!-- Mirrored from www.zi-han.net/theme/hplus/profile.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:17:47 GMT -->

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>H+ 后台主题UI框架 - 个人资料</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="././public/h+/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="././public/h+/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="././public/h+/css/animate.min.css" rel="stylesheet">
    <link href="././public/h+/css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <style media="screen">
        .story {
            text-indent: 2em;
        }

        .hertmsg eml {
            display: block;
            width: 150px;
            height: 20px;
            background-color: #BABABA;
        }

        .hertmsg eml i {
            display: block;
            height: 100%;
            width: 0px;
        }

        .story textarea {
            width: 100% !important;
            height: 100px;
            padding: 5px;
            resize: none;
            display: block;
        }

        .story textarea:disabled {
            background-color: #ffffff;
        }

        .hertmsg p:nth-of-type(1) i {
            background-color: #F2C500;
            transition: all 1s;
        }

        .hertmsg p:nth-of-type(2) i {
            background-color: #F59D00;
            transition: all 1s;
        }

        .hertmsg p:nth-of-type(3) i {
            background-color: #2C97DE;
            transition: all 1s;
        }

        .hertmsg p:nth-of-type(4) i {
            background-color: #1ECA6B;
            transition: all 1s;
        }

        .nav-tabs>li>a {
            padding: 10px;
        }

        .tabs-container .nav-tabs>li.active>a,
        .tabs-container .nav-tabs>li.active>a:focus,
        .tabs-container .nav-tabs>li.active>a:hover {
            border-top: 3px solid #00A383;
        }

        .nav-tabs>li.active>a,
        .nav-tabs>li.active>a:focus,
        .nav-tabs>li.active>a:hover {
            border-top: 3px solid #00A383;
        }

        .bianjiBtn {
            margin: 0 auto;
            display: block;
        }

        .ibox-title h3 {
            display: inline-block;
        }

        .tab-content textarea {
            display: block;
            width: 100% !important;
            resize: none;
            height: 70px;
        }

        .tab-content [type='text'] {
            width: 7em;
            display: inline-block;
        }
        .nav-tabs>li>a{
            width: 84px;
            height: 84px;
        }
        .nav-tabs>li>a>img{
            width: 100%;
            height: 100%;
        }
        /* .contemt{
                    background: rgba(255, 255, 255, 0.5);
                }
        .ibox-content,.ibox-title{
            background-color: transparent;
        }
        .backgroundImg{
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0px;
            background-image: url('http://ossweb-img.qq.com/images/lol/web201310/skin/big53000.jpg');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-position: fixed;
        } */

        .image-picker {
            overflow: hidden;
            position: relative;
        }

        .image-picker::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
        /* .mouseover */
        .mouseover::after {
            content: '点击修改';
            background: hsla(0, 0%, 0%, 0.5);
        }
        .iSelect{
            display: inline-block;
            width: 50px;
            float: right;
            margin-top: -20px;
            margin-right: 30px;
        }
        .mouseoverDiv{
            width: 86px;
            height: 91px;
            position: relative;
            margin-top: -93px;
        }
        .mouseover1::after {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            content: '点击修改';
            background: hsla(0, 0%, 0%, 0.5);
        }

        .firstimg{
            width: 80px;
            height: 80px;
            margin: 10px auto;
            background-color: #fff;
        }
        .twoimg{
            width: 100%;
        }
    </style>
</head>

<body class="gray-bg">
    <!-- <div class="backgroundImg"></div> -->
    <div class="wrapper wrapper-content">
        <div class="row animated fadeInRight">
            <div class="col-sm-4 col-sm-offset-4 contemt">
                <div class="ibox float-e-margins">
                    <form action="index.php?c=profile&a=modifyHeroInfo&id={{$profile['id']}}" method='post' enctype='multipart/form-data'>
                        <!-- <form action="hero.tpl"> -->
                    <div class="ibox-title">
                        <h3>英雄资料</h3>
                    </div>
                    <div>
                        <div class="ibox-content no-padding border-left-right">
                            <div class="image-picker">
                                <img name="img" class="img-responsive imgUpload firstimg" src="{{$profile['img']}}">
                            </div>
                        </div>
                        <div class="ibox-content no-padding border-left-right">
                            <div class="image-picker">
                                <img name="big_img" class="img-responsive imgUpload twoimg" src="{{$profile['big_img']}}">
                            </div>
                        </div>
                        <div class="ibox-content profile-content">
                                <p> 
                                    <input type="text" name="big_name" class="form-control" value="{{$profile['big_name']}}">
                                </p>
                                <p>
                                    <input type="text" name="name" class="form-control" value="{{$profile['name']}}">
                                </p>
                            <p>
                            <select name="type" class="form-control">
                                {{foreach $type as $i}}
                                    {{if $i['type'] == $profile['type']}}
                                    <option value="{{$i['id']}}" selected = "selected">{{$i['type']}}</option>
                                    {{else}}
                                    <option value="{{$i['id']}}">{{$i['type']}}</option>
                                    {{/if}}
                                {{/foreach}}
                            </select>
                            </p>
                            <div class="hertmsg">
                                <p>
                                    防御能力
                                    <eml>
                                        <i style="width: {{$profile['live']*2}}0%;"></i>
                                    </eml>
                                    <select name="live" class="iSelect" class="form-control">
                                        {{for $var=0 to 5}} {{if $var == $profile['live']}}
                                        <option value="{{$var}}" selected="selected">{{$var}}</option>
                                        {{else}}
                                        <option value="{{$var}}">{{$var}}</option>
                                        {{/if}} {{/for}}
                                    </select>
                                </p>
                                <p>
                                    物理攻击
                                    <eml>
                                        <i style="width: {{$profile['physics']*2}}0%;"></i>
                                    </eml>
                                    <select name="physics" class="iSelect" class="form-control">
                                        {{for $var=0 to 5}} {{if $var == $profile['physics']}}
                                        <option value="{{$var}}" selected="selected">{{$var}}</option>
                                        {{else}}
                                        <option value="{{$var}}">{{$var}}</option>
                                        {{/if}} {{/for}}
                                    </select>
                                </p>
                                <p>
                                    魔法攻击
                                    <eml>
                                        <i style="width: {{$profile['magic']*2}}0%;"></i>
                                    </eml>
                                    <select name="magic" class="iSelect" class="form-control">
                                        {{for $var=0 to 5}} {{if $var == $profile['magic']}}
                                        <option value="{{$var}}" selected="selected">{{$var}}</option>
                                        {{else}}
                                        <option value="{{$var}}">{{$var}}</option>
                                        {{/if}} {{/for}}
                                    </select>
                                </p>
                                <p>
                                    上手难度
                                    <eml>
                                        <i style="width: {{$profile['difficulty']*2}}0%;"></i>
                                    </eml>
                                    <select name="difficulty" class="iSelect" class="form-control">
                                        {{for $var=0 to 5}} {{if $var == $profile['difficulty']}}
                                        <option value="{{$var}}" selected="selected">{{$var}}</option>
                                        {{else}}
                                        <option value="{{$var}}">{{$var}}</option>
                                        {{/if}} {{/for}}
                                    </select>
                                </p>

                            </div>

                            <h4>
                                技能介绍
                            </h4>

                            <div class="skills">
                                <div class="">
                                    <div class="tabs-container">
                                        <ul class="nav nav-tabs">
                                            <li class="active">
                                                <a class="image-picker" data-toggle="tab" href="#tab-1" aria-expanded="true">
                                                    <img name="pimg" class="imgUpload" src="{{$profile['pimg']}}" alt=""> 
                                                </a>
                                                <div class="mouseoverDiv"></div>
                                            </li>
                                            <li class="">
                                                <a class="image-picker" data-toggle="tab" href="#tab-2" aria-expanded="false">
                                                    <img name="qimg" class="imgUpload" src="{{$profile['qimg']}}" alt="">
                                                </a>
                                            </li>
                                            <li class="">
                                                <a class="image-picker" data-toggle="tab" href="#tab-3" aria-expanded="false">
                                                    <img name="wimg" class="imgUpload" src="{{$profile['wimg']}}" alt="">
                                                </a>
                                            </li>
                                            <li class="">
                                                <a class="image-picker" data-toggle="tab" href="#tab-4" aria-expanded="false">
                                                    <img name="eimg" class="imgUpload" src="{{$profile['eimg']}}" alt="">
                                                </a>
                                            </li>
                                            <li class="">
                                                <a class="image-picker" data-toggle="tab" href="#tab-5" aria-expanded="false">
                                                    <img name="rimg" class="imgUpload" src="{{$profile['rimg']}}" alt="">
                                                </a>
                                            </li>
                                        </ul>
                                        <div class="tab-content">
                                            <div id="tab-1" class="tab-pane active">
                                                <div class="panel-body">
                                                    <input type="text" name="pname" value="{{$profile['pname']}}" class="form-control">
                                                    <input type="text" disabled value="被动技能" class="form-control">
                                                    <textarea name="pd" class="form-control">{{$profile['pd']}}</textarea>
                                                </div>
                                            </div>
                                            <div id="tab-2" class="tab-pane">
                                                <div class="panel-body">
                                                    <input type="text" name="qname" value="{{$profile['qname']}}" class="form-control">
                                                    <input type="text" disabled value="快捷键：Q" class="form-control">
                                                    <textarea name="qd" class="form-control">{{$profile['qd']}}</textarea>
                                                </div>
                                            </div>
                                            <div id="tab-3" class="tab-pane">
                                                <div class="panel-body">
                                                    <input type="text" name="wname" value="{{$profile['wname']}}" class="form-control">
                                                    <input type="text" disabled value="快捷键：W" class="form-control">
                                                    <textarea name="wd" class="form-control">{{$profile['wd']}}</textarea>
                                                </div>
                                            </div>
                                            <div id="tab-4" class="tab-pane">
                                                <div class="panel-body">
                                                    <input type="text" name="ename" value="{{$profile['ename']}}" class="form-control">
                                                    <input type="text" disabled value="快捷键：E" class="form-control">
                                                    <textarea name="ed" class="form-control">{{$profile['ed']}}</textarea>
                                                </div>
                                            </div>
                                            <div id="tab-5" class="tab-pane">
                                                <div class="panel-body">
                                                    <input type="text" name="rname" value="{{$profile['rname']}}" class="form-control">
                                                    <input type="text" disabled value="快捷键：R" class="form-control">
                                                    <textarea name="rd" class="form-control">{{$profile['rd']}}</textarea>
                                                </div>
                                            </div>
                                        </div>


                                    </div>
                                </div>
                            </div>
                            <!-- <h5>
                                背景故事
                            </h5>
                            <div class="story">
                                <textarea name="name" disabled class="form-control">布里茨没日没夜地在街道上走来走去，只要还有人可能需要帮助，他就拒绝暂停或休息。他的援助不仅面向人类和流浪动物，甚至还延伸到了损坏的机械体。有一次燃气泄漏引起的大火烧毁了达沃兰钟塔，他用自己巨大的铁手救出了一个机械师家庭，还有家里的黑猫，甚至还在半路上从一间儿童卧室里抢救出了一个发条舞娘玩偶。</textarea>
                            </div> -->
                <input class="btn bianjiBtn btn-info" type="submit" name="" value="保存">
                        </div>
                    </div>

                </form>
                </div>
            </div>
        </div>
    </div>
    <script src="././public/h+/js/jquery.min.js?v=2.1.4"></script>
    <script src="././public/h+/js/bootstrap.min.js?v=3.3.6"></script>
    <script src="././public/h+/js/content.min.js?v=1.0.0"></script>
    <script src="././public/h+/js/plugins/peity/jquery.peity.min.js"></script>
    <script src="././public/h+/js/demo/peity-demo.min.js"></script>
</body>
<script>
    let imgUpload = document.querySelectorAll('.imgUpload');
        for (let i = 0; i < imgUpload.length; i++) {
            imgUpload[i].innerHTML = '<input class="imgUploadInput" name="img'+i+'" type="file" accept="image/jpeg,image/jpg,image/png,image/webp" onchange="con(this)"/>';
            document.querySelectorAll('.imgUploadInput')[i].addEventListener('click', function (event) {
                event.stopPropagation();
            })
        }
        let fun = function (i) {
            document.querySelectorAll('.image-picker')[i].addEventListener('mouseover', function () {
                document.querySelectorAll('.image-picker')[i].classList.add('mouseover');
            })
            document.querySelectorAll('.image-picker')[i].addEventListener('mouseout', function () {
                document.querySelectorAll('.image-picker')[i].classList.remove('mouseover');
            })
            document.querySelectorAll('.image-picker')[i].addEventListener('click', function (event) {
                document.querySelectorAll('.imgUploadInput')[i].click();
            })
        }
        fun(0);
        fun(1);
        let add = function(){
            this.classList.add('mouseover1');
        }
        let remove = function () {
            this.classList.remove('mouseover1');
        }
        let upload = function(){
            this.parentNode.firstElementChild.firstElementChild.firstElementChild.click();
        }
        let a = document.querySelectorAll('a.image-picker');
        let mouserover = function(){
            let mouseoverDiv = document.querySelector('div.mouseoverDiv');
            mouseoverDiv.parentNode.removeChild(mouseoverDiv);

            let div = document.createElement("div");
            div.className = "mouseoverDiv";
            this.parentNode.appendChild(div);
            div.classList.add('mouseover1');
            div.addEventListener('mouseover', add);
            div.addEventListener('mouseout', remove);
            div.addEventListener('click', upload); 
        }
        let mouseoverDiv = document.querySelector('div.mouseoverDiv');
        mouseoverDiv.addEventListener('mouseover', add);
        mouseoverDiv.addEventListener('mouseout', remove);
        mouseoverDiv.addEventListener('click', upload);
        for(let i=0;i<a.length;i++){
            a[i].addEventListener('click',mouserover);
        }
        let con = function (e) {
            let file = e.files[0];
            if (file == undefined) return;
            let reader = new FileReader();
            reader.onload = function (event) {
                let dataUrl = event.target.result;
                e.parentNode.src = dataUrl;
            }
            reader.readAsDataURL(file);
        }
    
    let emIs = document.querySelectorAll('i');
    let iSelects = document.querySelectorAll('.iSelect');
    for(let i=0;i<emIs.length;i++){
        iSelects[i].addEventListener('change',function(){
            emIs[i].style.width = (this.value*20)+"%";
        })
    }
</script>
</html>